<template>
  <div>
    <ht-header>注册</ht-header>
    <ht-logo></ht-logo>

    <van-form @submit="register">
      <van-field
        v-model="user.username"
        label="账号"
        placeholder="请输入你的账号"
        :rules="rules.username"
      />
      <van-field
        v-model="user.nickname"
        label="昵称"
        placeholder="请输入你的昵称"
        :rules="rules.nickname"
      />
      <van-field
        v-model="user.password"
        type="password"
        label="密码"
        placeholder="请输入密码"
        :rules="rules.password"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit"> 注册 </van-button>
      </div>
      <p class="tips">
        已有账号？去<router-link to="/login">登录</router-link>
      </p>
    </van-form>
  </div>
</template>

<script>
// import axios from 'axios'
// import axios from 'axios'
export default {
  data() {
    return {
      user: {
        username: '',
        nickname: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请填写账号', trigger: 'onChange' },
          {
            pattern: /^\d{5,11}$/,
            message: '账号长度是5-11位数字',
            trigger: 'onChange',
          },
        ],
        nickname: [
          { required: true, message: '请填写昵称', trigger: 'onChange' },
          {
            pattern: /^\d{5,11}$/,
            message: '昵称长度是5-11位数字',
            trigger: 'onChange',
          },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'onChange' },
          {
            pattern: /^\d{3,9}$/,
            message: '密码长度是3-9位数字',
            trigger: 'onChange',
          },
        ],
      },
    }
  },
  methods: {
    async register() {
      // axios({
      //   method: 'post',
      //   url: 'http://localhost:3000/register',
      //   data: this.user,
      // }).then((res) => {
      //   console.log(res)
      // })
      const res = await this.$axios.post('/register', this.user)
      const { statusCode, message } = res.data
      if (statusCode === 200) {
        this.$toast.success(message)
        // console.log(this.$route)
        this.$router.push({
          path: '/login',
          query: this.user,
        })
        // this.$router.push({
        //   name: 'login',
        //   params: this.user,
        // })
      } else {
        this.$toast.fail(message)
      }
      //  console.log(res)
      // async register() {
      // const res = await this.$axios.post('/register', this.user)
      // const { statusCode, message } = res.data
      // if (statusCode === 200) {
      //   this.$toast.success(message)
      //   this.$router.push('/login')
      // } else {
      //   this.$toast.fail(message)
      // }
    },
  },
}
</script>

<style></style>
